左侧的导航栏  
<template>
  <ul>
    <li
      v-for="item in nav"
      :key="item.id"
      @click="changes($event,item.id)"
      :class="item.id == keys ? 'active' : '' "
    >
      <span class="iconfont">{{item.icon}}</span>
      <i>{{ item.name}}</i>
    </li>
  </ul>
</template>
<script>
export default {
  name: "leftNav",

  data() {

    return {
      nav: [
        {
          name: "个人中心",
          id: 0,
          icon:'\ue60d',
        },
        {
          name: "我的订单",
          id: 1,
          icon:'\ue627',
        },
        {
          name: "我的优惠券",
          id: 2,
          icon:'\ue631',
        },
        {
          name: "我的报价单",
          id: 3,
          icon:'\ue715',
        },
        {
          name: "我的收藏",
          id: 4,
          icon:'\ue634',
        },
        {
          name: "我的地址",
          id: 5,
          icon:'\ue614',
        },
        {
          name: "我的发票",
          id: 6,
          icon:'\ue6d0',
        },
        {
          name: "我的求购",
          id: 7,
          icon:'\ue69f',
        },
        {
          name: "售后维权",
          id: 8,
          icon:'\ue613',
        }
      ]
    }
  },

  computed: {
    keys() {
      return this.$store.state.leftIndex
    }
  },

  methods: {
    // 点击左侧导航
    changes(event, id) {
      
      this.$store.commit("leftIndex", id)

      switch (id) {
        case 0:
          this.$router.push({
            name: 'MyCenter'
          })
          break
        case 1:
          this.$router.push({
            name: 'FullOrder'
          })
          break
        case 2:
          this.$router.push({
            name: 'MyCoupon'
          })
          break
        case 3:
          this.$router.push({
            name: 'MyQuotation'
          })
          break
        case 4:
          this.$router.push({
            name: 'MyCollection'
          })
          break
        case 5:
          this.$router.push({
            name: 'MyAddress'
          })
          break
        case 6:
          this.$router.push({
            name: 'MyInvoice'
          })
          break
        case 7:
          this.$router.push({
            name: 'MyWantBuy'
          })
          break
        case 8:
          this.$router.push({
            name: 'AfterSale'
          })
          break
      }

    }
    
  }

}
</script>
<style lang="scss" scoped>
ul {
  background: #fff;
  padding: 10px 0px;
  li {
    padding-left: 40px;
    line-height: 36px;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-weight: bold;
    color: rgb(77, 74, 74);
    transition: all ease-in-out .2s;
    span{
      font-weight: normal;
      margin-right: 5px;
    }
    &:hover {
      color: #ff9000;
    }
  }
  .active {
    color: #ff9000;
  }
}
</style>
